<template>
  <span>
    <el-dialog :visible="driverDispatchVisible"
               :title="`调度给个体司机方式`"
               :width="`1020px`"
               :before-close="close"
               append-to-body>
      <el-tabs v-model="activeName"
               class="logo-tab"
               @tab-click="handleClick">
        <el-tab-pane label="带价调度"
                     name="first">
          <span v-if="dispatchType === 'waybill'">
            <el-row class="mt10">
              <template v-for="(item, i) in address">
                <el-col :key="i"
                        :span="12">
                  <el-col :span="2"
                          :class="item.type">
                    <icon-svg class-name="iconClass"
                              :icon-name="item.icon" />
                  </el-col>
                  <div class="person">
                    <span :title="item.type === 'from' ? `${record.fromProvince}${record.fromCity}${record.fromDistrict}${record.fromAddress}` : `${record.toProvince}${record.toCity}${record.toDistrict}${record.toAddress}`"
                          class="ellipsis-1">
                      {{ record[`${item.type}Province`] }}{{ record[`${item.type}City`] }}{{ record[`${item.type}District`] }}{{ record[`${item.type}Address`] }}
                    </span>
                  </div>
                </el-col>
              </template>
            </el-row>
            <el-row class="rowSty">
              <el-col :span="8">合同编号：{{record.contractNo}}</el-col>
              <el-col :span="4">总数量：{{record.totalQuantity}}</el-col>
              <el-col :span="4">总重量：{{record.calculateWeight.toFixed(2)}}</el-col>
              <el-col :span="4">总体积：{{record.calculateVolume.toFixed(2)}}</el-col>
            </el-row>
            <el-row class="rowSty">
              <el-col :span="4">运输模式：{{record.transportMode === 1 ? '零担' : '整车'}}</el-col>
              <el-col :span="4">计费模式：{{record.chargeModeDesc}}</el-col>
              <el-col :span="4">计价单位：{{record.pricingUnitDesc}}</el-col>
              <el-col :span="5">物品总价值(元)：{{calculateValue}}</el-col>
              <el-col :span="7">
                运输要求：<span v-if="record.pick"><i class="el-icon-success c-primary ml5" />提货</span>
                <span v-if="record.deliver"><i class="el-icon-success c-primary ml5" />送货</span>
                <span v-if="record.onLoad"><i class="el-icon-success c-primary ml5" />装货</span>
                <span v-if="record.offLoad"><i class="el-icon-success c-primary ml5" />卸货</span>
                <span v-if="record.insure">
                  <i v-if="record.pick && record.deliver && record.onLoad && record.offLoad"
                     class="el-icon-success c-primary ml75 mt5" />
                  <i v-else
                     class="el-icon-success c-primary ml5" />保价</span>
              </el-col>
            </el-row>
          </span>
          <span v-else>
            <el-row class="rowSty">
              <el-col :span="6">合同编号：{{record.contractNo}}</el-col>
              <el-col :span="6">合单：{{record.childWayBillNum}}</el-col>
              <el-col :span="6">提送次数：{{record.pickCount}}提{{record.deliverCount}}送</el-col>
            </el-row>
            <el-row class="rowSty">
              <el-col :span="6">总数量：{{record.totalQuantity}}</el-col>
              <el-col :span="6">总重量：{{record.calculateWeight.toFixed(2)}}</el-col>
              <el-col :span="6">总体积：{{record.calculateVolume.toFixed(2)}}</el-col>
              <el-col :span="6">物品总价值：{{calculateValue}}</el-col>
            </el-row>
            <el-row class="rowSty2">
              <el-col :span="24">备注信息：{{record.desc || '--'}}</el-col>
            </el-row>
          </span>
          <div class="DescSty">按单报价（单位：元）</div>
          <el-row :gutter="20"
                  class="plr30">
            <template v-for="(ele, index) in quoteFee">
              <el-col :key="index"
                      :span="8"
                      class="flex-start">
                <span style="width: 100px;">{{ele.label}}：</span>
                <el-input v-model="ele.value"
                          oninput="this.value=(this.value.match(/\d{0,7}(\.\d{0,2})?/)||[''])[0];"
                          @input="handleInput" />
              </el-col>
            </template>
          </el-row>
          <div class="totalSty">报价费用(含税费)：<span style="color:var(--prev-color-primary)">{{totalFee}}</span></div>
          <div class="DescSty">付款方式（单位：元）</div>
          <el-row :gutter="20"
                  class="plr30">
            <template v-for="(e, index) in payFee">
              <el-col v-if="!(e.label==='代收货款' && dispatchType==='combine')"
                      :key="index+e.label"
                      :span="8"
                      class="flex-start">
                <span style="width: 100px;">{{e.label}}：</span>
                <el-input v-model="e.value"
                          oninput="this.value=(this.value.match(/\d{0,7}(\.\d{0,2})?/)||[''])[0];" />
              </el-col>
            </template>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="直接调度"
                     name="second">
          <div class="content">确定直接调度吗?</div>
        </el-tab-pane>
      </el-tabs>
      <div class="footerSty">
        <el-button type="default"
                   @click="close">取消</el-button>
        <el-button type="primary"
                   :loading="loading"
                   @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </span>
</template>
<script>
import { mapState } from "vuex";
import { returnThousandDigit } from "@/libs/util.js";
export default {
  name: "DriverDispatchDialog",
  props: {
    driverDispatchVisible: Boolean,
    record: Object,
    dispatchType: {
      type: String,
      default: 'waybill'
    }
  },
  data () {
    return {
      activeName: 'first',
      loading: false,
      address: [{ type: 'from', icon: 'qi1' }, { type: 'to', icon: 'zhong1' }],
      quoteFee: [{ value: null, label: '运费' }],
      payFee: [{ value: null, label: '预付款' }, { value: null, label: '货到付款' }, { value: null, label: '代收货款' }],
      totalFee: 0
    }
  },
  computed: {
    ...mapState({
      menuList: (state) => state.login.menuList
    }),
    calculateValue () {
      return returnThousandDigit(this.record.calculateValue, 2)
    },
    quoteAuth () {
      let waybillQuotaMenuId = this.menuList.find(i =>
        i.name === '承运方报价' && i.children.length)?.children.find(x =>
          x.name === '运单报价')?.menuId;
      let combineQuotaMenuId = this.menuList.find(i =>
        i.name === '承运方报价' && i.children.length)?.children.find(x =>
          x.name === '合单报价')?.menuId;

      if (this.dispatchType === 'waybill' && waybillQuotaMenuId) {
        return true
      }
      if (this.dispatchType === 'combine' && combineQuotaMenuId) {
        return true
      }
      return false
    }
  },
  created () {
    if (this.dispatchType === 'waybill') {
      if (this.record.onLoad) {
        this.quoteFee.push({ value: null, label: '装货费' })
      }
      if (this.record.offLoad) {
        this.quoteFee.push({ value: null, label: '卸货费' })
      }
    } else {
      this.quoteFee = [{ value: null, label: '运费' }, { value: null, label: '装货费' }, { value: null, label: '卸货费' }]
    }
  },
  methods: {
    handleClick () { },
    handleInput () {
      let total = 0;
      this.quoteFee.map(item => {
        total += Number(item.value)
      })
      this.totalFee = returnThousandDigit(total, 2);
    },
    // 确定
    handleSubmit () {
      this.loading = true;
      if (this.activeName === 'first') {
        // if (this.quoteAuth) {
        //   this.$confirm("此次操作将直接调度给个体司机，确定直接调度吗?", "调度给个体司机提示", {
        //     confirmButtonText: "确定",
        //     cancelButtonText: "取消",
        //     type: "warning"
        //   }).then(() => {
        //     this.$emit("handleDispatch");
        //     this.close();
        //   });
        // } else {
        //   console.log("========>带价调度接口")
        // }
        if (this.quoteFee[0].value || this.quoteFee[0].value === 0) {
          this.$emit("handleDispatch", {
            fee: Number(this.quoteFee[0].value),
            loadFee: this.dispatchType != 'waybill' || this.record.onLoad ? Number(this.quoteFee[1]?.value) || 0 : 0,
            unloadFee: this.dispatchType === 'waybill' && !this.record.onLoad ? Number(this.quoteFee[1]?.value) || 0 : Number(this.quoteFee[2]?.value) || 0,
            prepayFee: Number(this.payFee[0].value),
            arrivePayFee: Number(this.payFee[1].value),
            collectionFee: Number(this.payFee[2]?.value) || 0,
          });
        } else {
          this.loading = false;
          return this.$message.warning("运费不能为空");
        }
      }
      if (this.activeName === 'second') {
        this.$emit("handleDispatch");
      }
      this.close();
      this.loading = false;
    },
    // 取消
    close () {
      this.handleClick(0);
      this.$emit("update:driverDispatchVisible", false);
    }
  },
};
</script>
<style lang="scss" scoped>
.footerSty {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
}
.content {
  min-height: 100px;
  padding: 20px;
}
.mt5 {
  margin-top: 5px;
}
.mt10 {
  margin-top: 10px;
}
.ml5 {
  margin-left: 5px;
}
.ml75 {
  margin-left: 75px;
}
.from {
  text-align: left;
  > span {
    display: inline-block;
    padding: 5px 6px;
    border-radius: 50%;
    font-size: 16px;
    color: var(--prev-bg-white);
    background-color: #2aa239;
  }
}
.to {
  text-align: left;
  > span {
    display: inline-block;
    padding: 5px 6px;
    border-radius: 50%;
    font-size: 16px;
    color: var(--prev-bg-white);
    background-color: #e52914;
  }
}
.person {
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  margin-top: 10px;
}
.iconClass {
  font-size: 32px;
  position: relative;
  top: 5px;
}
.ellipsis-1 {
  width: 400px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rowSty {
  height: 30px;
  padding: 18px 30px;
}
.rowSty2 {
  min-height: 30px;
  padding: 18px 30px 0px 30px;
}
.DescSty {
  height: 20px;
  padding: 18px 30px;
  background-color: var(--prev-bg-lightgrey);
  margin-top: 20px;
}
.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 15px;
}
.plr30 {
  padding: 0 30px;
}
.totalSty {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}
</style>